import React from 'react';
import '../css/login.css';
import UserService from '../service/user'
import { Redirect } from 'react-router'
import { observer } from 'mobx-react'
import { message } from 'antd'
import 'antd/lib/message/style'
@observer
export default class Reg extends React.Component {
    constructor(props) {
        super(props);
        this.service = new UserService();  //构造
    }
    handleReg(event) {
        event.preventDefault();  //处理页面刷新问题，阻止缺省行为 
        let fm = event.target.form
        // console.log(fm[0].value,fm[1].value,fm[2].value)
        this.service.reg(fm[0].value, fm[1].value, fm[2].value)
    }
    render() {
        if (this.service.reggin)
            return <Redirect to="/home" />
        if (this.service.userMsg) {
            message.error(this.service.userMsg, 5, () => this.service.userMsg = '')
        }
        return (
            <div className="login-page">
                <div className="form">
                    <form className="login-form">
                        <input type="text" placeholder="用户名" />
                        <input type="text" placeholder="邮箱" />
                        <input type="password" placeholder="密码" />
                        <input type="password" placeholder="确认密码" />
                        <button onClick={this.handleReg.bind(this)}>注册</button>
                        <p className="message">已经注册<a href="login"> 登录用户 </a></p>
                    </form>
                </div>
            </div>
        )
    }
}